import { Menu, MenuItem } from "@arco-design/web-vue";
import { defineComponent, onMounted, ref } from "vue";
import { useRouter } from "vue-router";

const links = [
  { title: "About", to: "/about" },
  { title: "HelloWorld", to: "/hello-world" },
  { title: "原神", to: "/g/ys" },
];

const linksToSet = new Set<string>(["/", ...links.map((it) => it.to)]);

const Navbar = defineComponent({
  setup() {
    const router = useRouter();

    const activeMenuKey = ref<string | null>(null);

    const handleMenuItemClick = (key: string) => {
      activeMenuKey.value = key;
      router.push(key);
    };

    onMounted(() => {
      const p = document.location.pathname;
      if (linksToSet.has(p)) {
        activeMenuKey.value = p;
      }
    });

    return () => (
      <Menu
        mode="horizontal"
        selectedKeys={activeMenuKey.value ? [activeMenuKey.value] : []}
        onMenuItemClick={handleMenuItemClick}
        style={{ backgroundColor: "rgba(0,0,0,0.6)", position: "fixed", zIndex: 1000 }}
      >
        <MenuItem key="/" style={{ padding: 0, marginRight: "38px" }}>
          <div
            style={{
              width: "80px",
              height: "30px",
              borderRadius: "2px",
              background: "var(--color-fill-3)",
            }}
          />
        </MenuItem>
        {links.map((it) => (
          <MenuItem key={it.to}>{it.title}</MenuItem>
        ))}
      </Menu>
    );
  },
});

export default Navbar;
